<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_l8m63i5283.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
	</head>
	<body>
		<div class="container-fluid bg-white">
			<div class="fkd-xx">
				<div class="fkd-item">
					<div>
						<span>单号：SK-20190903-161353 <span class="color00BCD4">(已收款)</span> </span>
						<span>收款时间：2019-09-03 16:14:04</span>
						<span>制单人：黄经理</span>
					</div>
					<div id="zuofei" ></div>
				</div>
				<div class="fkd-item">
					<table id="fkd-order" lay-filter="test"></table>
				</div>
				<div class="fkd-item">
					<div><span class="color00BCD4">备注：</span><span>暂无备注</span></div>
					<div><span class="color00BCD4">经办人：</span><span>张学友</span></div>
					<div><span class="color00BCD4">附件信息：</span><span>暂无附件</span></div>
				</div>
			</div>
		</div>
		
		<!-- //作废弹出层 -->
		<div id="model" class="prompt hidden">
			<div class="prompt-box">确认将付款单<span id="orderNumber"></span>(<span>收款方：<span id="u-name" class="ff6600"></span>,金额：<span class="ff6600" id="u-money"></span></span>)作废？付款单作废后状态不可退回。如确认作废，请填写作废原因:</div>
			<div class="prompt-box">
				<textarea id="promptContent" placeholder="请输入"></textarea>
			</div>
		</div>
		
		<!-- 操作按钮 -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="zuofei">作废</a>
		</script>
		
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Gather.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-34)+"px"})
			})
			
			$(window).resize(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-67)+"px"})
			})
			
			var vm = new Vue({
				el:".container-fluid",
				data:{
					
				},
				methods:{
					
				}
			})
			
			// 测试数据
			let arrayData = [
				{
					userid:"小雷家电线厂",
					pwd:"900.00",
					uname:"现金账户",
					sex:"工商银行",
					rank:"6212262402012895309",
					uptime:"线下支付",
					exptime:"收款单充值"
				}
			]
			
			layui.use(['form','table','laydate','element'], function(){
				var table = layui.table,
				laydate = layui.laydate,
				form = layui.form,
				element = layui.element,
				layer = layui.layer;
				
				// 数据列表渲染
				table.render({
					elem: '#fkd-order'
					,data:arrayData// data为数据库查到的数据
					,height: 100
					,cols: [[//以下field字段为为数据库相同,title为字段描述
						{field:'userid', title: '付款方名称'}
						,{field:'pwd', title: '收款金额'}
						,{field:'uname',  title: '账户名称'}
						,{field:'sex',  title: '开户银行'}
						,{field:'rank',  title: '银行账号',}
						,{field:'uptime',  title: '支付方式',}
						,{field:'exptime',  title: '摘要',}
						,{fixed: 'right',  title: '操作', toolbar: '#barDemo',}
					]]
				});
				
				
				table.on('tool(test)', function(obj){
					$("#model").removeClass('hidden');
					$("#u-name").text(obj.data.uname)
					$("#u-money").text(obj.data.rank)
					$("#orderNumber").text("SK-20190903-161353")
					layer.open({
						type: 1,
						area: ['600px', '400px'],
						btn: ['确定', '取消'],
						content: $('#model'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
						yes:function(e){
							$("#model").addClass('hidden');
							layer.msg("您输入的是："+$("#promptContent").val())
							layer.close(e);
						},
						cancel:function(m){
							$("#model").addClass('hidden');
							
						}
					});
				})
				
			});
		</script>
	</body>
</html>
